<template>
    <section id="shop-car">
        <div class="nav">
            <i @click="back()"></i>
            <span>购物车</span>
            <u v-show="show" @click="showDel()"></u>
            <span class="bianji" v-show="!show" @click="showDel()">编辑</span>
        </div>
        <div class="shop-list" v-for="shop in shopData.list">
            <p>
                <input
                    name="shopcheck"
                    type="checkbox"
                    :class="{cur:shop.check}"
                    @click="perAllCheck(shop)"
                />
                <span>{{shop.name}}</span>
            </p>
            <ul>
                <li v-for="product in shop.products">
                    <input
                        name="check"
                        type="checkbox"
                        :class="{cur:product.check}"
                        @click="choose(shop,product)"
                    />

                    <img :src="product.img" alt />
                    <div>
                        <h5 class="title">{{product.title}}</h5>
                        <p>
                            颜色：黑色；尺码：M
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiangxiazhankai" />
                            </svg>
                        </p>
                        <br />
                        <span>降价{{product.lowPrice}}元</span>
                        <div class="op-num">
                            <p>
                                <u>￥</u>
                                <span class="price">{{product.price}}</span>
                            </p>
                            <p class="operation">
                                <b @click="mul(product)">-</b>
                                <span class="num">{{product.num}}</span>
                                <b @click="add(product)">+</b>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="totle">
            <p>
                <input
                    type="checkbox"
                    name="allchecks"
                    :class="{cur:shopData.status}"
                    @click="allCheck(shop,product)"
                />
                <span>全选</span>
            </p>
            <p class="right" v-show="show">
                <span>
                    <u>￥</u>
                    <span>{{shopData.totalPrice}}</span>
                </span>
                <span class="to-buy">结算</span>
            </p>
            <span class="to-buy" v-show="!show" @click="delshop()">移出购物车</span>
        </div>
    </section>
</template>

<script>
import { Toast } from "mint-ui";

export default {
    data() {
        return {
            show: true,
            shopData: {
                list: [
                    {
                        id: 1,
                        name: "MOlly小姐",
                        shopcheck: false,
                        choose: 0,
                        products: [
                            {
                                proId: 1001,
                                title:
                                    "连帽卫衣女春秋新款学生宽松bf套头带帽衫薄款ins潮白色上衣",
                                price: 60,
                                sum: 60,
                                lowPrice: 100,
                                totalPrice: 0,
                                num: 1,
                                img: "./src/assets/images/car/car2-shop01.webp",
                                check: false,
                            },
                            {
                                proId: 1002,
                                title: "薄款ins潮白色上衣",
                                price: 50,
                                sum: 50,
                                lowPrice: 100,
                                totalPrice: 0,
                                num: 1,
                                img: "./src/assets/images/car/car-shop01.webp",
                                check: false,
                            },
                        ],
                    },
                    {
                        id: 2,
                        name: "haha小葛",
                        check: false,
                        choose: 0,
                        products: [
                            {
                                proId: 2001,
                                title: "灰色裤子",
                                price: 100,
                                sum: 100,
                                lowPrice: 100,
                                totalPrice: 0,
                                num: 1,
                                img: "./src/assets/images/car/car-shop02.webp",
                                check: false,
                            },
                            {
                                proId: 2002,
                                title: "薄款ins潮白色上衣",
                                price: 50,
                                sum: 50,
                                lowPrice: 100,
                                totalPrice: 0,
                                num: 1,
                                img: "./src/assets/images/car/car-shop01.webp",
                                check: false,
                            },
                        ],
                    },
                ],
                status: false, //全选选中状态
                shopChooseNum: 0, //店铺选中个数
                totalPrice: 0, //总计价格
            },
        };
    },
    methods: {
        // 减少数量
        mul(p) {
            if (p.num <= 1) {
                Toast({
                    message: "商品数量不能低于1",
                    position: "middle",
                    duration: 2000,
                });
            } else {
                p.num--;
                if (p.check) {
                    this.shopData.totalPrice -= p.price;
                }
            }
        },
        // 增加数量
        add(p) {
            if (p.num >= 5) {
                Toast({
                    message: "超出购买数量",
                    position: "middle",
                    duration: 2000,
                });
            } else {
                p.num++;
                if (p.check) {
                    this.shopData.totalPrice += p.price;
                }
            }
        },

        // 个人店铺单个商品选中
        isSelected(s, p) {
            p.check = true;
            // 个人店铺选中数量加1
            // 判断个人店铺选中是否等于个人店铺数组长度，是为check=true
            // 判断全部店铺选中是否等于总点偶数组长度，是为status=true
            ++s.choose == s.products.length ? (s.check = true) : "";
            // s.check?++this.shopData.shopChooseNum==this.shopData.list.length?this.shopData.status=true:this.shopData.status=false:'';
            if (s.check) {
                ++this.shopData.shopChooseNum;
                if (this.shopData.shopChooseNum == this.shopData.list.length) {
                    this.shopData.status = true; //全选按钮是否选上
                } else {
                    this.shopData.status = false;
                }
            }
        },
        unSelected(s, p) {
            p.check = false;
            --s.choose;
            if (s.check) {
                s.check = false;
                --this.shopData.shopChooseNum;
            }
            this.shopData.status = false; //全选状态为false
        },

        choose(s, p) {
            !p.check ? this.isSelected(s, p) : this.unSelected(s, p);
            this.compute(p);
        },

        // 个人店铺选中
        shopIsSelected(s) {
            // 遍历个人店铺所有商品，如果没有选中，执行个人店铺商品选中的函数
            s.products.forEach((product) => {
                if (product.check == false) {
                    this.isSelected(s, product);
                }
            });
        },

        shopUnSelected(s) {
            s.products.forEach((product) => {
                if (product.check == true) {
                    this.unSelected(s, product);
                }
            });
        },

        // 个人店铺是否全选
        perAllCheck(s) {
            !s.check ? this.shopIsSelected(s) : this.shopUnSelected(s);
            // 点击店铺全选计算总金额
            var perPrice = 0;
            s.products.forEach((product) => {
                perPrice += product.price * product.num;
            });
            if (s.check) {
                this.shopData.totalPrice += perPrice;
            } else {
                this.shopData.totalPrice -= perPrice;
            }
        },
        // 全选，所有店铺和商品选中
        allCheck() {
            this.shopData.status = !this.shopData.status;
            if (this.shopData.status) {
                var totalPrice = 0;
                this.shopData.list.forEach((shop) => {
                    this.shopIsSelected(shop);
                    shop.products.forEach((pro) => {
                        totalPrice += pro.price * pro.num;
                    });
                });
                // 总金额
                this.shopData.totalPrice = totalPrice;
            } else {
                this.shopData.list.forEach((shop) => {
                    this.shopUnSelected(shop);
                });
                this.shopData.totalPrice = 0;
            }
        },
        compute(pro) {
            let price = pro.num * pro.price;
            if (pro.check) {
                //如果商品被选中
                this.shopData.totalPrice += price; //计算总价
            } else {
                this.shopData.totalPrice -= price;
            }
        },
        showDel() {
            this.show = !this.show;
        },
        // 删除商品
        delshop() {
            this.shopData.list.forEach((shop, indexs) => {
                shop.products.forEach((pro, index) => {
                    if (pro.check == true) {
                        shop.products.splice(index, 1);
                    }
                });
            });
        },
        back() {
            this.$router.go(-1);
        },
    },
};
</script>

<style lang="scss">
#shop-car {
    background-color: #efefef;
    padding-bottom: 80px;
    @mixin i {
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 50%;
        -webkit-appearance: none;
        outline: none;
        border: 1px solid rgb(212, 212, 212);
        &.cur {
            background: url("../../assets/images/car/check40x40.png");
            background-size: contain;
        }
    }
    .nav {
        display: flex;
        padding: 10px;
        background-color: white;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgb(182, 182, 182);
        span {
            font-size: 20px;
            color: rgb(73, 71, 71);
        }
        i,
        u {
            display: inline-block;
            width: 25px;
            height: 25px;
        }
        i {
            background: url("../../assets/images/mine/return.png") no-repeat
                center/contain;
        }
        u {
            background: url("../../assets/images/home-chat.png") no-repeat
                center/contain;
        }
        .bianji {
            font-size: 14px;
        }
    }
    .shop-list {
        margin: 10px;
        padding: 20px 15px;
        border-radius: 5px;
        background-color: white;
        & > p {
            margin-bottom: 20px;
            input {
                @include i;
            }
            span {
                font-weight: 600;
            }
        }
        & > ul {
            li {
                display: flex;
                margin-bottom: 25px;
                input {
                    @include i;
                    align-self: center;
                }
                & > img {
                    width: 25%;
                    margin: 0px 10px;
                }
                & > div {
                    width: 60%;
                    h5 {
                        font-size: 12px;
                        font-weight: bold;
                    }
                    & > p {
                        display: inline-block;
                        font-size: 12px;
                        color: rgb(155, 155, 155);
                        margin: 6px 0;
                        background-color: rgb(240, 240, 240);
                        svg {
                            transform: scale(1.7);
                        }
                    }
                    & > span {
                        display: inline-block;
                        font-size: 12px;
                        color: #ff4466;
                        border: 1px solid #ff4466;
                        padding: 1px 2px;
                    }
                }
            }
            .op-num {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                u {
                    text-decoration: none;
                    font-size: 12px;
                    color: #ff4466;
                }
                .price {
                    font-size: 18px;
                    color: #ff4466;
                    font-weight: bold;
                }
                .operation {
                    line-height: 24px;
                    padding: 0 10px;
                    background-color: rgb(240, 240, 240);
                    border-radius: 20px;
                    span {
                        font-size: 13px;
                        padding: 0 15px;
                        font-weight: bold;
                    }
                    b {
                        color: rgb(189, 189, 189);
                    }
                }
            }
        }
    }
    .totle {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 92%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 4%;
        // line-height: 0px;
        background-color: white;
        input {
            @include i;
        }
        .right {
            color: #ff4466;
            u {
                text-decoration: none;
                font-size: 12px;
            }
        }
        .to-buy {
            background-color: #ff4466;
            color: white;
            padding: 2px 13px;
            font-size: 14px;
            border-radius: 20px;
        }
    }
}
</style>